
<!doctype html>
<html>
<head>
	<title>CLGT - Google Admin Theme</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="./css/bootstrap-responsive.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
	<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
	<div class="navbar navbar-fixed-top m-header">
		<div class="navbar-inner m-inner">
			<div class="container-fluid">
				<a class="brand m-brand" href="./index.html">Gin</a>
				
	            <form class="form-search m-search span5">
					<input type="text" placeholder="Type to search" class="span5 search-query">
				</form>

				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		        </button>
		        
				<div class="nav-collapse collapse">

					<div class="btn-group pull-right">
				        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
			          		<i class="icon-user"></i> Thanh Dang
			          		<span class="caret"></span>
				        </a>
				        <ul class="dropdown-menu">
			          		<li><a href="#"><i class="icon-user"></i>Profile</a></li>
			          		<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
	 		 				<li class="divider"></li>
			          		<li><a href="login.html"><i class="icon-off"></i>Logout</a></li>
				        </ul>
			      	</div>
	          	</div>
			</div>
		</div>
	</div>
	<div class="m-top"></div>
	<aside class="sidebar">
		<ul class="nav nav-tabs nav-stacked">
			<li>
				<a href="index.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-home.png">
						</div>
						<div class="title">
							Home
						</div>
					</div>

					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="notification.html">
					<span class="badge badge-important m-badge-notification">6</span>
					<div>
						<div class="ico">
							<img src="./img/ico/ico-notification.gif">
						</div>
						<div class="title">
							Notification
						</div>
					</div>

					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="active">
				<a href="form.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-setting.gif">
						</div>
						<div class="title">
							Setting
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="order.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-order.gif">
						</div>
						<div class="title">
							Order
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="media.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-media.gif">
						</div>
						<div class="title">
							Media
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="help.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-help.gif">
						</div>
						<div class="title">
							Help
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-user.gif">
						</div>
						<div class="title">
							User
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-report.gif">
						</div>
						<div class="title">
							Report
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#" id="btn-more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-more.png">
						</div>
						<div class="title">
							More
						</div>
					</div>
				</a>

			</li>
	    </ul>
	</aside>
	<div class="m-sidebar-collapsed">
		<ul class="nav nav-pills">
			
		</ul>

		<div class="arrow-border">
			<div class="arrow-inner"></div>
		</div>
	</div>
	<div class="main-container">
		<div class="container-fluid">
			<section>
				<div class="page-header">
					<h1>Media</h1>
				</div>

				<div class="row-fluid m-botton-group">
					<div class="span8">
						<div class="btn-group" data-toggle="buttons-radio">
		                    <button class="btn">All</button>
		                    <button class="btn">Video</button>
		                    <button class="btn active">Image</button>
		                </div>
					</div>
					<div class="span4">
	                	<div class="btn-group pull-right">
							<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
						    	<i class="icon-white icon-plus"></i>
						    	Add new
						    	<span class="caret"></span>
						  	</a>
							<ul class="dropdown-menu">
								<li>
									<a data-toggle="modal" href="#myModal"><i class="icon-file"></i>Video</a>
								</li>
								<li>
									<a data-toggle="modal" href="#myModal">
										<i class="icon-picture"></i>
										Image
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="row-fluid">
					<div class="well">
						<ul class="thumbnails m-media-container">
							<li class="span2">
								<a href="#" class="thumbnail">
									<img title="image" src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
						</ul>

						<ul class="thumbnails m-media-container">
							<li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
					        <li class="span2">
								<a href="#" class="thumbnail">
									<img src="http://placehold.it/160x120" alt="">
								</a>
								<div class="m-media-action">
									<a href="#" class="btn"><i class="icon-remove"></i></a>
									<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
								</div>
					        </li>
						</ul>
					</div>
				</div>
			</section>
			<section id="m-modal">
				<div class="modal hide" id="myModal">
					<div class="modal-header">
				    	<button type="button" class="close" data-dismiss="modal">x</button>
				    	<h3>Upload Modal</h3>
					</div>
					<div class="modal-body">
				    	<form class="form-horizontal">
				    		<div class="m-upload-add well">
				    			<a href="#">
				    				<img src="./img/ico/ico-add.gif">
				    				Choose your file
				    			</a>
				    		</div>
				    	</form>

				    	<div class="m-upload-list">
				    		<table class="table table-striped table-condensed">
				    			<tbody>
				    				<tr>
				    					<td>the-smashing-book-3-redesign-the-web.epub</td>
				    					<td>
				    						<a href="#" class="btn"><i class="icon-trash"></i></a>
				    					</td>
				    				</tr>

				    				<tr>
				    					<td>the-smashing-book-3-redesign-the-web.epub</td>
				    					<td>
				    						<a href="#" class="btn"><i class="icon-trash"></i></a>
				    					</td>
				    				</tr>

				    				<tr>
				    					<td>the-smashing-book-3-redesign-the-web.epub</td>
				    					<td>
				    						<a href="#" class="btn"><i class="icon-trash"></i></a>
				    					</td>
				    				</tr>

				    				<tr>
				    					<td>
				    						<div class="m-progress progress progress-striped active">
											  <div class="bar"
											       style="width: 40%;"
											       title="uploading ..."></div>
											</div>
				    					</td>
				    					<td>
				    						<a href="#" class="btn"><i class="icon-trash"></i></a>
				    					</td>
				    				</tr>
				    			</tbody>
				    		</table>
				    	</div>
				 	</div>
				 	<div class="modal-footer">
						<a href="#" class="btn" data-dismiss="modal">Close</a>
						<a href="#" class="btn btn-primary">Upload</a>
					</div>
				</div>
			</section>
		</div>
	</div>
</body>
</html>